<template>
  <div>
    <n-space align="center">
      <RouterLink to="/page/page1/1112222">
        <n-button color="#8a2be2">
          <template #icon>
            <n-icon>
              <CashIcon />
            </n-icon>
          </template>
          #8a2be2
        </n-button>
      </RouterLink>
      <RouterLink to="/page/page2/66666">
        <n-button color="#ff69b4">
          <template #icon>
            <n-icon>
              <CashIcon />
            </n-icon>
          </template>
          #ff69b4
        </n-button>
      </RouterLink>
      <n-button ghost color="#8a2be2" @click="openPage3">
        <template #icon>
          <n-icon>
            <CashIcon />
          </n-icon>
        </template>
        #8a2be2
      </n-button>
    </n-space>
    <!-- 第三层路由页面呈现 -->
    <RouterView/>
  </div>
</template>

<script setup>
import { CashOutline as CashIcon } from "@vicons/ionicons5";
import {onBeforeRouteLeave, onBeforeRouteUpdate, useRouter} from 'vue-router'
const router = useRouter()
const openPage3 = ()=>{
  // 1. 不传递参数
  // router.push('/page3')

  // 2. 传递参数
  router.push({
    path:'/page/page3',
    query:{
      name:'三丰',
      score:100
    }
  })
}

//监听路由地址信息变化
onBeforeRouteUpdate((to,from)=>{
  console.log('检测到了路由地址变化',to);
  //应用场景：检测当前页面的路由信息变化，进而执行新的网络请求获取新的商品数据
})

onBeforeRouteLeave(()=>{
  let bool = confirm('当前页面信息尚未保存，确定要离开吗？')
  console.log(bool);
  return bool
})

</script>